博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序--问题汇总及详解之tab切换
阅读量:7243 次
发布时间:2019-06-29

本文共 3148 字,大约阅读时间需要 10 分钟。

设置背景颜色就直接在page里设置    page {background-color: rgb(242, 242, 242);}

tab切换:

navigator 页面链接

传参的格式为url="路径?title={

{item.title}}"   多个用&&连接

下个页面接收参数:

wxml:

进行中
已完成
{ {item.act_name}}
{ {item.pro_name}}
添加项目

wxss:

page {
background-color: rgb(242, 242, 242); /*设置背景颜色就直接在page里设置*/}.container {
width: 100%;}.swiper-tab {
width: 84%; text-align: center; line-height: 60rpx; margin-top: 40rpx; margin-bottom: 20rpx; border: 2rpx solid #1c7bf3; border-radius: 6rpx;}.swiper-tab-list {
font-size: 28rpx; display: inline-block; width: 50%; float: left; color: #1c7bf3;}.on {
color: #fff; background-color: #1c7bf3; box-shadow: 0 0 20rpx #d1e5fd;}.swiper-box {
display: block; height: 100%; width: 100%; overflow: hidden;}image {
width: 140rpx; height: 140rpx; display: inline-block; overflow: hidden; border-radius: 100%; float: left; margin-top: 36rpx; margin-left: 26rpx; margin-right: 30rpx;}.content {
width: 94%; height: 220rpx; box-shadow: 0 0 20rpx #bbb; margin: auto; margin-top: 22rpx; line-height: 220rpx; font-size: 32rpx; margin-left: 3%; background: #fff; border-radius: 8rpx;}.content>view {
float: left;}.txt1 {
color: #ff5438;}.hb {
text-align: center; margin-top:70rpx; font-size: 28rpx; width: 100%; margin-left:36%;}.text2 {
color: #bbb; float: left;}view {
display: inline-block;}

js:

/*获取系统信息*/    wx.getSystemInfo({
success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }) }, /** 滑动切换tab **/ bindChange: function (e) {
var that = this; that.setData({ currentTab: e.detail.current }); }, /** 点击tab切换 **/ swichNav: function (e) {
var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else {
that.setData({ currentTab: e.target.dataset.current }) } },
var app = getApp()Page({  data: {    winWidth: 0,  /* 页面配置*/    winHeight: 0,    currentTab: 0,   // tab切换      oneList: [{     //遍历数组,前台需要请求遍历的参数      id: '',      act_pic:'',      act_name: '',      pro_name: '',    }],  },//获取点击的产品ID,并保存在本地缓存   (进行中)  bindIndexId: function (e) {    var indexId = e.currentTarget.dataset.indexId    wx.setStorageSync('indexId', indexId)  },onLoad: function () {    var that = this;    var tokend = wx.getStorageSync('tokend') //取token    //刷新页面后得到进行中的数据    wx.request({      method: 'GET',      url: 'https://....?token=' + tokend,      header: {
'content-type': 'application/json'}, data: {}, success: function (res) { // success console.log(res) that.setData({ //将后台数值与前台数组匹配(集合) loadingList: res.data.data }) } });

转载于:https://www.cnblogs.com/JinQing/p/6673321.html

你可能感兴趣的文章
开发了个 Flipper 调试工具的 Flutter 版本 SDK,让 Flutter 应用调试起来更容易
查看>>
spring cloud config将配置存储在数据库中
查看>>
HTTP代理ip的这些误区你知道吗?
查看>>
初探 Vue 生命周期和钩子函数
查看>>
探究防抖(debounce)和节流(throttle)
查看>>
为何把日志打印到控制台很慢?
查看>>
Java多线程-Callable和Future
查看>>
记一次用iview实现表格"合并"单元格的具体操作
查看>>
React入门:从零搭建一个React项目
查看>>
“三次握手,四次挥手”你真的懂吗?
查看>>
JavaScript五十问——对比来说CSS的Grid与FlexBox(下篇)
查看>>
无监控、不运维。运维系统架构设计附带思维导图
查看>>
Salesforce平台支持多租户Multi tenant的核心设计思路
查看>>
KubeCon + CloudNativeCon北美2018年会议透明度报告:一项破纪录的CNCF活动
查看>>
浅谈RPC
查看>>
nodejs实现webservice问题总结
查看>>
ios 原生骨架动画库
查看>>
深入解读MySQL8.0 新特性 :Crash Safe DDL
查看>>
Fundebug计费标准解释:事件数是如何定义的?
查看>>
Elasticsearch Query DSL基础介绍
查看>>